<template>
    <fieldset>
        <legend>高级侦听器</legend>
        <button @click="handlestop">停止侦听</button>
    </fieldset>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
let msg =ref('lolo')
let msg1 =ref('lala')

setTimeout(()=>{
    msg.value='卡卡西'

},2000)
// setTimeout(()=>{
//     msg1.value='过水门'
// },3000)

// let stop= watchEffect(()=>{
//     console.log('高级侦听',msg.value);
//     console.log('高级侦听',msg1.value);
// }) 

let handlestop=()=>{
    stop();
}

// 失效函数
//触发的情况:1. watchEf fect即将重新回调2. watchEffect停止侦听(组件卸载隐式停止侦听,显示主动停止侦听)
//顺序:1.打印'春天的故事'=>'侦听器即将重新执行'=>'涛声依旧!


//执行顺序 1.lala 2.侦听器即将重新执行3.恒瑞
watchEffect((onInvalidate)=>{
    console.log('onInvalidat概念====',msg1.value)
    onInvalidate(()=>{
        console.log('侦听器即将重新执行');
    })
})
setTimeout(()=>{
    msg1.value='恒瑞'
},2000)
</script>